<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>03_一个dom中画多个图</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.js"></script>
</head>
<body>
  <div id="main" style="width:800px;height:500px"></div>
</body>
<script>
  let dom=document.querySelector('#main');
  const myecharts=echarts.init(dom);
  option = {
    //标题
    title: {
      text: 'echarts的基本使用01',
      //子标题
      // subtext:'子标题',
      left: 'left',
      textStyle: {
        color: '#29d'
      }
    },
    //x轴
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    //y轴
    yAxis: {
      show: true,
      //展示y轴线
      axisLine: {
        show: true,
      },
      //展示刻度
      axisTick: {
        show: true,
      }
    },
    //说明，图例
    legend: {
      data: ['销量', '价格','饼图']
    },
    //详情显示组件
    tooltip: {},
    //下载、回退、保存、刷新...功能盒子组件
    toolbox: {
      show: true,
      feature: {
        //各个功能（5个）在页面展示的顺序可调，移动代码段进行调整
        dataZoom: {
          yAxisIndex: "none"
        },
        dataView: {
          readOnly: false
        },
        magicType: {
          type: ["line", "bar"]
        },
        restore: {},
        saveAsImage: {}
      }
    },
    //展示图形（条形图、折线图）的系列配置series
    series: [
      {
        type: 'bar',
        name: '销量',
        data: [5, 20, 36, 10, 10, 20],
        color: '',
        label: {
          show: true,
          position:"top",
        }
      },
      {
        type: 'bar',
        name: '价格',
        data: [8, 16, 33, 11, 6, 17],
        color: '',
        label: {
          show: true,
          position:"top",
        }
      },
      {
        type: 'pie',
        name:'饼图',
        data: [
          {
            value: 335,
            name: '直接访问'
          },
          {
            value: 234,
            name: '联盟广告'
          },
          {
            value: 1548,
            name: '搜索引擎'
          }
        ],
        width:250,
        height:250,
        left:400,
        top:100,
        radius:30
      }
    ]
  }
  myecharts.setOption(option)
</script>
</html>
